<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">

      <el-form-item label="活动名称" prop="taskId">
        <el-select
          v-model="queryParams.taskId"
          placeholder="活动名称"
          clearable
          style="width: 240px"
          @change="getTaskDetail"
        >
          <el-option
            v-for="e in taskList"
            :key="e.id"
            :label="e.title"
            :value="e.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!--<el-descriptions v-if="taskDetail.startTime || taskDetail.endTime" :column="3">
      <el-descriptions-item label="活动时间">{{ taskDetail.startTime }}至{{ taskDetail.endTime }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions>
      <el-descriptions-item v-for="(e, i) in resObj.count" :key="i" :label="e.item">{{ e.num }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions>
      <el-descriptions-item v-for="(e, i) in resObj.levelCount" :key="i" :label="e.awards_level">{{ e.receive_awards_num }}次 / {{ e.awards_num }}次</el-descriptions-item>
    </el-descriptions>-->

    <!-- <el-descriptions :column="3">
      <el-descriptions-item label="活动时间" span="3">{{ taskDetail.startTime }}至{{ taskDetail.endTime }}</el-descriptions-item>
      <el-descriptions-item label="参与人数">{{ taskDetail.joinInType == 2 ? taskDetail.limitMans : '不限' }}</el-descriptions-item>
      <el-descriptions-item label="参与人次">100人/次</el-descriptions-item>
      <el-descriptions-item label="抽奖">100次</el-descriptions-item>
      <el-descriptions-item label="奖项1" span="1.5">10个/100个</el-descriptions-item>
      <el-descriptions-item label="奖项2" span="1.5">10个/100个</el-descriptions-item>
      <el-descriptions-item label="累计金额" span="3">100元/200元</el-descriptions-item>
    </el-descriptions> -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="12" style="text-align: left;">
        <el-descriptions v-if="taskDetail.startTime || taskDetail.endTime" :column="3">
      <el-descriptions-item label="活动时间">{{ taskDetail.startTime }}至{{ taskDetail.endTime }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions>
      <el-descriptions-item v-for="(e, i) in resObj.count" :key="i" :label="e.item">{{ e.num }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions>
      <el-descriptions-item v-for="(e, i) in resObj.levelCount" :key="i" :label="e.awards_level">{{ e.receive_awards_num }}次 / {{ e.awards_num }}次</el-descriptions-item>
    </el-descriptions>

      </el-col>
      <el-col :span="12" style="text-align: right;">
        <JsonExcel class="export-excel-wrapper" :data="allAwards" :fields="json_fields" type="xlsx" title="活动统计表" name="活动统计表.xlsx" v-if='allAwards.length > 0'>
          <el-button  v-if='total > 0' type="warning" plain icon="el-icon-download" size="mini" >下载</el-button>
        </JsonExcel>
        <!--显示导出数据准备中，请稍后-->
        <span v-else style="font-size: 14px;">导出数据准备中，请稍后</span>


      </el-col>
    </el-row>

    <el-table 
    :border="true" 
    :data="list"
    v-loading="dataloading"
    element-loading-text="数据加载中，请稍后..."
    element-loading-spinner="el-icon-loading"
    >
      <el-table-column label="序号" prop="rn" width="80" />
      <el-table-column label="微信" prop="openId" width="300" />
      <el-table-column label="姓名" prop="memberName" />
      <el-table-column label="联系电话" prop="phone" />
      <el-table-column label="联系地址" prop="address" />
      <el-table-column label="答题时间" prop="startTime" width="200" />
      <el-table-column label="得分" prop="totalPoint" width="80" />
      <el-table-column label="抽奖结果" prop="awardsLevel" width="150" />
      <el-table-column label="领奖时间" prop="receiveAwardsTime" width="200" />
      <el-table-column label="领奖金额" prop="awardsMoney" width="100" />
      <el-table-column label="摇摇拉领取时间" prop="yaoyaolaTime" width="200" />
      <el-table-column label="摇摇拉状态" prop="yaoyaolaStatus" width="120" />
    </el-table>

    <el-pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @current-change="getListNoCount"
      background    
    />

  </div>
</template>

<script>
import { listBuzTask, getAwardsTj,getAllAwards,statisticsByTaskId,statisticsAwardByTaskId } from "@/api/system/buzTask";
import JsonExcel from 'vue-json-excel'

export default {
  name: "ExamStatistics",
  components: { JsonExcel },
  data() {
    return {
      // list: [],
      taskList: [],
      taskDetail: {},
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId: undefined,
        isCount: true// 是否重新统计条数 ，由于后台数据查询效率问题，估只在第一次查询的时候统计总条数
      },
      // 响应的数据
      resObj: {
        count: [],
        levelCount: [],
        tjList: []
      },
      // 转化导出的字段名
      json_fields: {
        序号: 'rn',
        微信: 'openId',
        姓名: 'memberName',
        联系电话: 'phone',
        答题时间: 'startTime',
        得分: 'totalPoint',
        抽奖结果: 'awardsLevel',
        领奖时间: 'receiveAwardsTime',
        领奖金额: 'awardsMoney',
        摇摇拉领奖时间: 'yaoyaolaTime',
        摇摇拉领奖状态: 'yaoyaolaStatus'
      },
      // 获取全部获奖信息(导出用)
      allAwards: [],
      dataloading: false
    }
  },
  computed: {
    list() {
      console.log('---list---')
      console.log(this.resObj.tjList)
      /*根据分页参数计算序号*/
      this.resObj.tjList.map((e, i) => {
        e.rn = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + i + 1
      })
      return this.resObj.tjList;
    }
  },
  created() {
    this.getTaskList()
    this.getList()
  },
  methods: {
    getTaskDetail(e) {
      console.log(e, 'e')
      this.taskList.map((e) => {
        if (e.id === this.queryParams.taskId) {
          this.taskDetail = e
          return
        }
      })
      console.log(this.taskDetail, 'taskDetail')
    },
    getTaskList() {
      listBuzTask().then(response => {
        this.taskList = response.rows
        this.loading = false
      })
    },
    getList() {
      // 重置获奖信息
      this.allAwards = []
      // 重置列表信息
      this.resObj.tjList = []
      if (!this.queryParams.taskId) {
        return false
      }
      this.queryParams.isCount =true;
      this.queryParams.pageNum = 1;
      this.dataloading = true
      getAwardsTj(this.queryParams).then(response => {
        this.resObj.tjList = response.data.tjList
        this.total = response.data.total
        this.dataloading = false
      }).catch(()=>{
        this.dataloading=false
      })
      // 获取所有获奖信息
      getAllAwards(this.queryParams.taskId).then(response => {
        console.log(response)
        /**/
        if(response.data.length>0){
          // 计算序号
          response.data.map((e, i) => {
            e.rn = i + 1
          })
          this.allAwards = response.data
        }
        
      })

      // 获取数据统计
      statisticsByTaskId(this.queryParams.taskId).then(response => {
        console.log(response)
        this.resObj.count = response.data.count
        //this.resObj.levelCount = response.data.levelCount
      })
      // 获取获奖统计
      statisticsAwardByTaskId(this.queryParams.taskId).then(response => {
        console.log(response)
        this.resObj.levelCount = response.data.levelCount
      })
      
    },
    /*不重新统计条数*/
    getListNoCount(val){
      console.log(val)
      if (!this.queryParams.taskId) {
        return false
      }
      this.queryParams.isCount =false;
      this.queryParams.pageNum = val;
      this.dataloading=true
      getAwardsTj(this.queryParams).then(response => {
        this.resObj.tjList = response.data.tjList
        this.dataloading=false
      }).catch(()=>{
        this.dataloading=false
      })

    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/role/export', {
        ...this.queryParams
      }, `role_${new Date().getTime()}.xlsx`)
    },
  }
};
</script>
